<template>
  <div class="upload-controls">
    <ProgressRing :progress="item.progress" />
    <div class="upload-action">
      <button @click="$emit('cancel')">
        <icon-times />
      </button>
      <button @click="$emit('retry')">
        <icon-clockwise />
      </button>
      <button @click="$emit('locate')">
        <icon-folder-open />
      </button>
    </div>
  </div>
</template>

<script setup>
import ProgressRing from './ProgressRing.vue'

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
})
</script>

<style scoped>
.upload-controls button {
  background: transparent;
  padding: 0;
  border: none;
  width: 32px;
  height: 32px;
}

.upload-controls button:hover {
  background: #1578db;
  border-radius: 50%;
  color: white;
}

.upload-controls,
.upload-action {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
